<template>

	<el-card>
		<el-scrollbar wrapClass="scrollbar-wrap" :style="{height: scrollHeight}" ref="scrollbarContainer">
			<el-button @click="input()" type="primary" style="margin: 25px 0;">
				新增
			</el-button>
			<div>
				<el-dialog title="新增" :visible.sync="dialogVisible" width="30%" :before-close="gb">
					<el-form :model="form" :rules="rules" ref="form">
						<el-form-item label="题库名称" label-width="100px" prop="name">
							<el-input v-model="form.name" placeholder="请输入题库名称"></el-input>
						</el-form-item>
					</el-form>
					<el-divider></el-divider>
					<el-button @click="qxq()">关 闭</el-button>
					<el-button type="primary" @click="sunbmit()">确 定</el-button>
					</span>
				</el-dialog>
			</div>

			<div>
				<el-dialog title="修改" :visible.sync="centerDialogVisible" width="30%" center :before-close="gb" >
					<el-form :model="form" :rules="rules" ref="form">
						<el-form-item label="题库名称" label-width="100px" prop="name">
							<el-input v-model="form.name" placeholder="请输入题库名称"></el-input>
						</el-form-item>
					</el-form>
					<el-divider></el-divider>
					<span slot="footer" class="dialog-footer">
						<el-button @click="qx()">取 消</el-button>
						<el-button type="primary" @click="sunbmita()">确 定</el-button>
					</span>
				</el-dialog>
			</div>

			<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
				</el-table-column>
				<el-table-column label="题库名称号" prop="name">

				</el-table-column>
				<el-table-column prop="danNums" label="单选题数量">
				</el-table-column>
				<el-table-column prop="duoNums" label="多选题数量" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="panNums" label="判断题数量" show-overflow-tooltip>
				</el-table-column>
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button @click="deletea(scope.row)" type="text" size="small">删除</el-button>
						<el-button @click='edit(scope.row)' type="text" size="small">修改</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-scrollbar>
	</el-card>
</template>

<script>
	export default {
		data() {
			return {
				scrollHeight: '0px',
				form: [{
					name: ''
				}],
				tableData: [],
				multipleSelection: [],
				title: '',
				dialogVisible: false,
				centerDialogVisible: false,
				danNums: 0,
				duoNums: 0,
				panNums: 0,
				currentPage: 4,
				form: [{
					name
				}],

				rules: {
					name: [{
						required: true,
						message: '题目名称不能为空',
						trigger: 'blur'
					}],
				},
			}
		},
		methods: {
			 gb(done){
				this.form={}
				done();
			  },
			deletea(row) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$ajax.post("/tiku/delete", {
						"id": row.id
					}).then(res => {
						if (res.data.success) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.getList()
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			edit(i) {
				console.log(i)
				this.form = i
				this.centerDialogVisible = true;
				
			},
			qx() {
				this.form = {}
				this.getList()
				this.centerDialogVisible = false;
				
			},
			qxq() {
				this.form = {}
				this.dialogVisible = false;
				
			},
			getList() {
				this.$ajax.post("/tiku/page", {}).then(res => {
					if (res.data) {
						var arr = new Array;
						for (let i = 0; i < res.data.data.rows.length; i++) {
							this.danNums = 0;
							this.duoNums = 0;
							this.panNums = 0;
							for (let q = 0; q < res.data.data.rows[i].question.length; q++) {
								if (res.data.data.rows[i].question[q].type == 1) {
									this.danNums++;
								} else if (res.data.data.rows[i].question[q].type == 2) {
									this.duoNums++;
								} else {
									this.panNums++;
								}
							}

							arr.push({
								'id': res.data.data.rows[i].id,
								'name': res.data.data.rows[i].name,
								"danNums": this.danNums,
								"duoNums": this.duoNums,
								"panNums": this.panNums
							})
						}
						this.tableData = arr
						console.log(this.tableData);
					}
				})
			},
			input() {
				this.form = {}
				this.dialogVisible = true;
				
			},

			sunbmit() {
				this.$ajax.post("/tiku/save", this.form).then(res => {
					if (res.data.success) {
						this.$message({
							message: '保存成功！',
							type: 'success'
						});
						this.getList()
					}
				})
				this.dialogVisible = false
			},
			sunbmita() {
				this.$ajax.post("/tiku/save", this.form).then(res => {
					if (res.data.success) {
						this.$message({
							message: '保存成功！',
							type: 'success'
						});
						this.getList()
					}
				})
				this.centerDialogVisible = false
			}
		},
		
		mounted() {
			this.scrollHeight = window.innerHeight * 0.84 + 'px';
		},

		created() {
			this.getList()
		}
	}
</script>

<style>

</style>
